<template>
  <div class="p-5">
    <div class="card-box">
      <SearchView @query="querybtn" @reset="resetbtn" />
    </div>

    <div class="card-box  mt-5">
      <div class="btns">
        <a-button type="primary" @click="openadd">
          <template #icon>
            <PlusOutlined />
          </template>
          创建账号
        </a-button>
        <a-button type="primary" @click="recoveryall">
          <template #icon>
            <EditFilled />
          </template>
          批量恢复
        </a-button>
        <a-button type="primary" danger @click="disableall">
          <template #icon>
            <ExclamationCircleFilled />
          </template>
          批量禁用
        </a-button>
        <a-button type="primary" danger @click="deleteall">
          <template #icon>

            <CloseCircleFilled />
          </template>
          批量删除
        </a-button>
      </div>
      <a-table :columns="columns" :data-source="data?.items" :pagination="false" rowKey="id"
        :row-selection="{ selectedRowKeys: newdata.selectedRowKeys, onChange: onSelectChange }">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'avatar'">
            <a-image :width="80" :src="record.cover" style="border-radius: 80px" />
          </template>
          <template v-if="column.key === 'useStatus'">
            <a-tag :color="record.useStatus == 1 ? 'success' : 'error'">{{
              record.useStatus == 1 ? '正常' : '禁用'
              }}</a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="openeidt(record)">编辑</a-button>
            <a-button type="link" @click="recoveryone(record.id)">恢复</a-button>

            <a-button type="link" danger @click="deleteone(record.id)">删除</a-button>
            <a-button type="link" danger @click="disablone(record.id)">禁用</a-button>
          </template>
        </template>
      </a-table>
      <PageView />
    </div>

    <addView v-model:value="newdata.open" :type="newdata.type" :editdata="newdata.editinfo" @submit="submit" />
  </div>
</template>
<script setup lang="ts">
import { reactive, inject, provide, createVNode } from 'vue';
import { useRouter } from 'vue-router';

import { PlusOutlined, EditFilled, ExclamationCircleFilled, CloseCircleFilled, ExclamationCircleOutlined } from '@ant-design/icons-vue';

import SearchView from './searchView.vue';

import PageView from '/components/PageView/index.vue';

import addView from './addView.vue';
import { useRequest, createUseRequestComponent } from "vue-hooks-plus";

import { Modal } from 'ant-design-vue';
import * as api from '#/api/core/account'

import { message } from 'ant-design-vue';

const userstatus = [
  {
    label: "正常",
    value: 1
  },
  {
    label: '禁用',
    value: 2
  }
]
const usergender = [
  {
    label: '男',
    value: 1
  }, {
    label: '女',
    value: 2
  }
]
provide('usertype', userstatus)
provide('gender', usergender)


const router = useRouter();

interface stateItem {
  type: 'add' | 'update';
  open: boolean;
  editinfo: any;
  current: any,
  pagesize: any,
  query: any,
  total: any,
  selectedRowKeys: any,

}

const newdata: stateItem = reactive({
  open: false,
  type: 'add',
  editinfo: {},
  current: 1,
  pagesize: 10,
  query: {},
  total: 0,
  selectedRowKeys: []
});

const columns = [
  {
    title: '头像',
    dataIndex: 'avatar',
    align: 'center',
    key: 'avatar',
  },
  {
    title: '账号',
    dataIndex: 'userName',
    align: 'center',
    key: 'userName',
  },
  {
    title: '手机号',
    dataIndex: 'phoneNumber',
    align: 'center',
    key: 'phoneNumber',
  },
  {
    title: '状态',
    dataIndex: 'useStatus',
    align: 'center',
    key: 'useStatus',
  },
  {
    title: '创建时间',
    dataIndex: 'creationTime',
    align: 'center',
    key: 'creationTime',
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    key: 'action',
  },
];


const { data, loading, error, run } = useRequest(
  () =>
    api.$gethabitlist({
      ...newdata.query,
      SkipCount: (newdata.current - 1) * newdata.pagesize,
      MaxResultCount: newdata.pagesize
    }),
  {
    manual: false, //手动触发

    onSuccess: (result) => {
      console.log("获取用户列表", result);



      newdata.total = result.totalCount
      // return result.items
      // 此时 data.value 与 result 是一致的
    },
  }
);

const onSelectChange = (selectedRowKeys: any) => {
  newdata.selectedRowKeys = selectedRowKeys;
}


const openadd = (e: any) => {
  newdata.type = 'add';
  newdata.open = true;
};

const openeidt = (e: any) => {
  newdata.editinfo = e;
  newdata.type = 'update';
  newdata.open = true;
};

const querybtn = (e: any) => {
  console.log("e", e);
  newdata.query = e;
  run();
};

const resetbtn = (e: any) => {
  newdata.query = e;
  console.log('重置表单', e, newdata.query
  );

  run();
};

const disableall = async () => {

  if (!newdata.selectedRowKeys.length) {
    message.warning('请选择要操作的数据')
    console.log('111', newdata.selectedRowKeys);

    return;
  }

  await api.$updateuserstatus({
    useStatus: 0,
    userIdList: newdata.selectedRowKeys
  })
  message.success('操作成功')
  newdata.selectedRowKeys = []

  run();
}

const disablone = async (id: any) => {
  try {
    await api.$updateuserstatus({
      useStatus: 0,
      userIdList: [id]
    })
    message.success('操作成功')
    run();

  } catch { }
}


const recoveryall = async () => {
  if (!newdata.selectedRowKeys.length) {
    message.warning('请选择要操作的数据')
    console.log('111', newdata.selectedRowKeys);

    return;
  }
  try {
    await api.$updateuserstatus({
      useStatus: 1,
      userIdList: newdata.selectedRowKeys
    })
    message.success('操作成功')
    run();
    newdata.selectedRowKeys = []

  } catch { }
}

const recoveryone = async (id: any) => {
  try {
    await api.$updateuserstatus({
      useStatus: 1,
      userIdList: [id]
    })
    message.success('操作成功')
    run();

  } catch { }
}


const deleteall = async () => {
  if (!newdata.selectedRowKeys.length) {
    message.warning('请选择要操作的数据')
    console.log('111', newdata.selectedRowKeys);

    return;
  }
  try {
    await api.$deleteaccounts({
      userIds: newdata.selectedRowKeys
    })

    message.success('操作成功')
    run();

  } catch { }
}

const deleteone = async (id: any) => {


  Modal.confirm({
    title: '提示?',
    icon: createVNode(ExclamationCircleOutlined),
    content: '确定要删除该数据',
    async onOk() {
      try {
        await api.$deleteaccount({
          id: id
        })

        message.success('操作成功')
        run();

      } catch { }
    },
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    onCancel() { },
  });

}


const submit = () => {
  run()
}

</script>

<style scoped lang="less">
.btns {

  padding: 1.25rem 0;

  button {
    margin: 0 5px;
  }
}
</style>
